<template>
  <div>
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">咨询危机信息记录</div>
      <div class="icon-wrapper">
        <i class="fas fa-file-medical"></i>
      </div>
    </div>

    <!-- 自定义提示消息 -->
    <div v-if="showMessage" :class="['message', messageType]">
      {{ messageText }}
    </div>

    <div class="container">
      <div class="card main-card">
        <div class="form-content">
          <!-- 咨询师 - 只读 -->
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-user-md"></i>
              咨询师
            </label>
            <input
              class="form-input"
              readonly
              v-model="formData.counselorname"
              placeholder="等待回显数据..."
            />
          </div>

          <!-- 咨询时间 - 只读 -->
          <div class="form-group">
            <label class="form-label">
              <i class="far fa-calendar"></i>
              咨询时间
            </label>
            <input
              type="text"
              class="form-input"
              readonly
              v-model="formData.counseldate"
              placeholder="等待回显数据..."
            />
          </div>

          <!-- 咨询时长 - 只读 -->
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-hourglass-half"></i>
              咨询时长（小时）
            </label>
            <input
              type="text"
              class="form-input"
              readonly
              v-model="formData.minutes"
              placeholder="等待回显数据..."
            />
            <p class="input-note">最小单位0.5小时</p>
          </div>

          <!-- 危机级别 - 可编辑 -->
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-exclamation-triangle"></i>
              危机级别
            </label>
            <div class="crisis-levels">
              <div
                class="crisis-level low-risk"
                :class="{ selected: formData.crisislevel === '低风险' }"
                @click="selectLevel('低风险')"
              >
                <i class="fas fa-check-circle"></i>
                <div class="level-name">低风险</div>
              </div>
              <div
                class="crisis-level medium-risk"
                :class="{ selected: formData.crisislevel === '中风险' }"
                @click="selectLevel('中风险')"
              >
                <i class="fas fa-exclamation-circle"></i>
                <div class="level-name">中风险</div>
              </div>
              <div
                class="crisis-level high-risk"
                :class="{ selected: formData.crisislevel === '高风险' }"
                @click="selectLevel('高风险')"
              >
                <i class="fas fa-radiation"></i>
                <div class="level-name">高风险</div>
              </div>
            </div>
          </div>

          <!-- 观察与建议 - 可编辑 -->
          <div class="form-group">
            <label class="form-label">
              <i class="fas fa-binoculars"></i>
              观察与建议
            </label>
            <textarea
              class="form-input textarea"
              placeholder="记录您的专业观察、风险评估、干预措施以及后续建议..."
              v-model="formData.observationsuggestion"
            ></textarea>
          </div>

          <div class="form-actions">
            <button class="btn-primary" @click="handleSubmit">
              <i class="fas fa-paper-plane"></i>
              提交记录
            </button>
            <button class="btn-reset" @click="handleReset">
              <i class="fas fa-redo"></i>
              重置
            </button>
          </div>
        </div>
      </div>

      <div class="card info-card">
        <div class="info-header">
          <div class="info-icon-wrapper">
            <i class="fas fa-info-circle"></i>
          </div>
          <div class="info-content">
            <h3 class="info-title">记录填写指南</h3>
            <ul class="info-list">
              <li>
                <i class="fas fa-check-circle"></i> 请完整填写所有必填字段
              </li>
              <li>
                <i class="fas fa-check-circle"></i> 危机级别评估需谨慎选择
              </li>
              <li>
                <i class="fas fa-check-circle"></i>
                咨询要点应包含关键信息和危机表现
              </li>
              <li>
                <i class="fas fa-check-circle"></i> 观察建议需包含具体干预措施
              </li>
              <li><i class="fas fa-check-circle"></i> 提交前请检查所有信息</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getZXForm, save } from "../../api/case";

export default {
  name: "CrisisConsultationForm",
  data() {
    return {
      appointmentId: null,
      formData: {
        appointid: null,
        counselorname: "",
        counseldate: "",
        minutes: "0",
        crisislevel: "",
        observationsuggestion: "",
        createtime: "",
        creator: 1200,
      },
      // 消息提示相关
      showMessage: false,
      messageText: "",
      messageType: "info", // info, success, error, warning
    };
  },
  created() {
    this.appointmentId = this.$route.query.id;
    this.getZXForm();
  },
  methods: {
    selectLevel(level) {
      this.formData.crisislevel = level;
    },

    // 显示消息提示
    showMsg(text, type = "info") {
      this.messageText = text;
      this.messageType = type;
      this.showMessage = true;

      // 3秒后自动隐藏
      setTimeout(() => {
        this.showMessage = false;
      }, 3000);
    },

    getZXForm() {
      // this.showMsg("正在加载回显数据...", "info");
      let data = { appointmentId: this.appointmentId };
      getZXForm(data)
        .then((res) => {
          if (res.code === 200) {
            this.handleEchoData(res.data);
            // this.showMsg("数据回显成功", "success");
          } else {
            // this.showMsg("数据回显失败: " + res.message, "error");
          }
        })
        .catch((error) => {
          console.error("回显接口调用失败:", error);
          this.showMsg("回显数据加载失败，请重试", "error");
        });
    },

    handleEchoData(echoData) {
      // 咨询师 - 使用name字段
      this.formData.counselorname = echoData.name || "";

      // 咨询时间 - 使用counseldate字段
      if (echoData.counseldate) {
        // 移除末尾的 ".0" 如果有的话
        let counseldate = echoData.counseldate;
        if (counseldate.endsWith(".0")) {
          counseldate = counseldate.substring(0, counseldate.length - 2);
        }
        this.formData.counseldate = counseldate;
      }

      // 咨询时长 - 使用minutes字段，如果没有则设为0
      this.formData.minutes =
        echoData.minutes !== null && echoData.minutes !== undefined
          ? echoData.minutes.toString()
          : "0";

      // 危机级别
      this.formData.crisislevel = echoData.crisislevel || "";

      // 观察与建议
      this.formData.observationsuggestion =
        echoData.observationsuggestion || "";

      // 预约ID
      this.formData.appointid = echoData.iaID;
    },

    handleSubmit() {
      // 验证必填字段
      if (!this.formData.crisislevel) {
        this.showMsg("请选择危机级别", "warning");
        return;
      }

      if (!this.formData.observationsuggestion) {
        this.showMsg("请输入观察与建议", "warning");
        return;
      }

      this.showMsg("正在提交数据...", "info");

      // 生成当前时间
      const now = new Date();
      this.formData.createtime = now
        .toLocaleString("sv", {
          year: "numeric",
          month: "2-digit",
          day: "2-digit",
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
        })
        .replace(" ", " ")
        .replace("T", " ");

      // 准备提交数据
      const data = {
        appointid: this.formData.appointid,
        counselorname: this.formData.counselorname,
        crisislevel: this.formData.crisislevel,
        observationsuggestion: this.formData.observationsuggestion,
        createtime: this.formData.createtime,
        creator: this.formData.creator,
      };
      console.log(data);

      // 使用与getZXForm相同的调用方式
      save(data)
        .then((res) => {
          if (res.code === 200) {
            this.showMsg("提交成功", "success");
            // 可以添加其他成功后的逻辑，比如返回上一页
          } else {
            this.showMsg("提交失败: " + res.message, "error");
          }
        })
        .catch((error) => {
          console.error("提交接口调用失败:", error);
          this.showMsg("提交失败，请重试", "error");
        });
    },

    handleReset() {
      // 重置表单，但保留回显的只读数据
      this.formData.crisislevel = "";
      this.formData.observationsuggestion = "";
      this.showMsg("表单已重置", "info");
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

.container {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  padding: 32px 16px;
  box-sizing: border-box;
  max-width: 768px;
}

/* 消息提示样式 */
.message {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideDown 0.3s ease;
}

.message.info {
  background-color: #1890ff;
}

.message.success {
  background-color: #52c41a;
}

.message.error {
  background-color: #ff4d4f;
}

.message.warning {
  background-color: #faad14;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 导航栏样式 */
.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
  color: #374151;
}

.card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  margin-bottom: 32px;
}

.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.main-card {
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.icon-wrapper i {
  color: #6366f1;
  font-size: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: 600;
  color: #374151;
  margin: 0;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.form-label i {
  color: #6366f1;
  margin-right: 8px;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.form-input {
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 16px;
}

.form-input:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.2);
  outline: none;
}

.form-input[readonly] {
  background-color: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
}

.input-note {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.crisis-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.crisis-level {
  padding: 12px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.crisis-level:hover {
  transform: translateY(-3px);
}

.crisis-level.selected {
  border-color: currentColor;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.crisis-level i {
  font-size: 24px;
  margin-bottom: 4px;
}

.level-name {
  font-weight: 500;
}

.low-risk {
  color: #10b981;
}

.medium-risk {
  color: #f59e0b;
}

.high-risk {
  color: #ef4444;
}

.textarea {
  height: 128px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 16px;
  padding-top: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3),
    0 4px 6px -2px rgba(99, 102, 241, 0.05);
}

.btn-primary i {
  margin-right: 8px;
}

.btn-reset {
  background-color: #f3f4f6;
  color: #374151;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
}

.btn-reset:hover {
  background-color: #e5e7eb;
}

.btn-reset i {
  margin-right: 8px;
}

.info-card {
  background-color: #eef2ff;
  border: 1px solid #c7d2fe;
  padding: 24px;
}

.info-header {
  display: flex;
  align-items: flex-start;
}

.info-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.info-icon-wrapper i {
  color: #6366f1;
}

.info-content {
  flex: 1;
}

.info-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  margin-top: 0;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.info-list li {
  display: flex;
  align-items: center;
}

.info-list i {
  color: #6366f1;
  margin-right: 8px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .crisis-levels {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .message {
    top: 70px;
    left: 16px;
    right: 16px;
    transform: none;
    text-align: center;
  }
}
</style>
